<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--账单明细-->
    <u-navbar
      title="明细"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="moreShow"
      :placeholder="true"
      :autoBack="true"
    >
      <view slot="right"
        ><u-icon name="more-dot-fill" size="36" color="#000000"></u-icon
      ></view>
    </u-navbar>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-10"
    ></u-loading-page>
    <view class="mx-4">
      <!--总提现/总收益-->
      <!-- <view class="flex text-dark text-base font-medium">
        <text
          class="leading-10 mr-8"
          v-if="typeValue == undefined || typeValue == 1"
          >提现<text class="text-darkNormal text-xs mx-1">￥</text
          >{{ bill.cash }}</text
        ><text
          class="leading-10"
          v-if="typeValue == undefined || typeValue == 2 || typeValue == 3"
          >收益<text class="text-darkNormal text-xs mx-1">￥</text
          >{{ bill.income }}</text
        >
      </view>
      <view class="border-b-gray"></view> -->

      <view v-if="infiniteList.length > 0">
        <view
          class="border-b-gray py-2"
          v-for="(item, index) in infiniteList"
          :key="item.id"
        >
          <view class="flex justify-between">
            <view class="text-base text-dark leading-7">{{
              item.bizType == '1'
                ? '提现'
                : item.bizType == '2'
                ? '一级徒弟收益'
                : item.bizType == '3'
                ? '二级徒弟收益'
                : item.bizType == '4'
                ? '三级徒弟收益'
                : item.bizType == '5'
                ? '补贴返款'
                : item.bizType == '6'
                ? '红包'
                : item.bizType == '7'
                ? '充值'
                : item.bizType == '8'
                ? '资金调整'
                : item.bizType == '9'
                ? '提现失败退回'
                : ''
            }}</view>
            <view class="text-lg text-dark font-medium leading-7">{{
              item.optAmt
            }}</view>
          </view>
          <view class="flex justify-between">
            <view class="text-xs text-darkNormal leading-7">{{
              item.createTime
            }}</view>
            <view class="text-xs text-darkNormal leading-7 flex"
              ><view
                v-if="item.optStatus == 2 || item.optStatus == 3"
                @click="showTip(item)"
                ><view class="mr-2 mt-2" v-if="item.show"
                  ><u-icon name="arrow-up" size="24"></u-icon></view
                ><view class="mr-2 mt-2" v-else
                  ><u-icon name="arrow-down" size="24"></u-icon></view></view
              ><text v-if="item.optStatus == 1">处理中</text
              ><text v-else-if="item.optStatus == 2">成功</text
              ><text v-else-if="item.optStatus == 3">失败</text>
            </view>
          </view>
          <view class="text-xs text-darkNormal leading-5" v-if="item.show"
            ><text v-if="item.bizType == '5'">{{ item.bizRemark }}</text
            ><text v-else>{{ item.bizRemark }}</text></view
          >
        </view>
      </view>
      <b-empty v-else></b-empty>
    </view>
    <!--筛选-->
    <view
      class="fixed left-0 z-10 w-full bg-white rounded-b-3xl"
      :style="{ top: 84 + statusBarHeight * 2 + 'rpx' }"
      v-if="isShow"
    >
      <view class="mx-4 mt-2.5">
        <u-search
          placeholder=""
          v-model="keyword"
          height="60rpx"
          searchIconSize="40"
          @search="searchSubmit"
          :showAction="false"
        ></u-search>
        <view class="text-base text-dark leading-8 py-2">分类</view>
        <option-item
          :data="typeList"
          :val="selectedArray"
          type="single"
          @update="typeSelect"
        ></option-item>
        <view class="text-base text-dark leading-8 pb-2">时间</view>
        <view class="flex">
          <view
            class="w-2/5 rounded-md h-7 leading-7 border-common text-center"
            @click="dateStart = true"
            >{{ validStart }}</view
          >
          <view class="w-1/5 text-center">——</view>
          <view
            class="w-2/5 rounded-md h-7 leading-7 border-common text-center"
            @click="dateEnd = true"
            >{{ validEnd }}</view
          >
        </view>
        <!--时间选择器暂定-->
        <u-datetime-picker
          @cancel="dateStart = false"
          @confirm="onStart"
          :show="dateStart"
          v-model="dateValidStart"
          mode="date"
          itemHeight="84"
          confirmColor="#ff3d62"
        ></u-datetime-picker>
        <u-datetime-picker
          @cancel="dateEnd = false"
          @confirm="onEnd"
          :show="dateEnd"
          v-model="dateValidEnd"
          mode="date"
          itemHeight="84"
          confirmColor="#ff3d62"
        ></u-datetime-picker>
      </view>
      <view class="flex justify-between mx-4 pb-7 mt-7">
        <view
          class="text-center text-base rounded-full w-1/2 h-10 leading-10 border-common mr-4"
          @click="reset"
          >清空</view
        >
        <view
          class="text-center text-base text-white rounded-full w-1/2 h-10 leading-10 login-btn ml-4"
          @click="filterSubmit"
          >完成</view
        >
      </view>
    </view>
    <view
      class="bg-black opacity-40 w-full h-full fixed left-0 top-0"
      v-if="isShow"
      @click="isShow = false"
    ></view>
  </view>
</template>

<script>
import infinite from '@/mixins/infinite';
import { getWallet } from '../../services/account';

export default {
  mixins: [infinite],
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      isLoading: true,
      isShow: false,
      dateValidStart: Number(new Date()),
      dateValidEnd: Number(new Date()),
      validStart: '',
      validEnd: '',
      dateStart: false,
      dateEnd: false,
      keyword: '',
      selectedArray: [],
      typeValue: '',
      typeList: [
        { text: '提现', value: '1' },
        { text: '一级徒弟收益', value: '2' },
        { text: '二级徒弟收益', value: '3' },
        { text: '三级徒弟收益', value: '4' },
        { text: '补贴返款', value: '5' },
        { text: '红包', value: '6' },
        { text: '充值', value: '7' },
        { text: '资金调整', value: '8' },
        { text: '提现失败退回', value: '9' },
      ],
      bill: {
        cash: '0.00',
        income: '0.00',
      },
      infiniteList: [],
    };
  },
  async created() {
    this.getInfiniteList();
  },
  methods: {
    //显示弹窗
    moreShow() {
      this.isShow = !this.isShow;
      this.selectedArray = this.typeValue != '' ? [this.typeValue] : [];
      //console.log(this.selectedArray);
    },
    //账单明细列表
    async getInfiniteData(pageIndex, pageSize, diyName = 'bills', diyType = 1) {
      if (this.typeValue == undefined) {
        this.typeValue = '';
      }
      let params = {
        begTime: this.validStart,
        bizType: this.typeValue,
        endTime: this.validEnd,
        pageNum: pageIndex,
        pageSize: pageSize,
      };
      const { code, data } = await getWallet(params);
      if (code != 200) return;
      this.bill = data;
      this.isLoading = false;
      //console.log(data.records);
      return data.records;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //显示提示
    showTip(item) {
      item.show = !item.show;
    },
    //分类选择
    typeSelect(valueArr, textArr) {
      this.typeValue = valueArr[0];
      //console.log(textArr.toString());
    },
    //日期选择
    onStart(e) {
      const timeFormat = uni.$u.timeFormat;
      if (typeof e.value == 'string') {
        this.validStart = e.value;
      } else {
        this.validStart = timeFormat(e.value, 'yyyy-mm-dd');
      }
      this.dateStart = false;
    },
    onEnd(e) {
      const timeFormat = uni.$u.timeFormat;
      if (typeof e.value == 'string') {
        this.validEnd = e.value;
      } else {
        this.validEnd = timeFormat(e.value, 'yyyy-mm-dd');
      }
      this.dateEnd = false;
    },
    //清空筛选
    reset() {
      this.selectedArray = [];
      this.typeValue = '';
      this.validStart = '';
      this.validEnd = '';
      this.keyword = '';
      //执行列表方法
      this.getInfiniteList(true);
    },
    //筛选方法
    filterSubmit() {
      //获取筛选参数并置空搜索关键词，因为筛选功能独立于搜索功能之外
      this.keyword = '';
      //执行列表方法
      this.getInfiniteList(true);
      this.isShow = false;
    },
    //搜索方法
    async searchSubmit() {
      //console.log(this.keyword);
      try {
        if (this.keyword == '') {
          uni.showToast({
            title: '请输入搜索关键字',
            icon: 'none',
          });
          return;
        }
        this.isShow = false;
        //执行搜索方法：独立于筛选之外，所以相当于需要先清空筛选选项
        this.typeValue = '';
        this.validStart = '';
        this.validEnd = '';
        this.getInfiniteList(true);
        //执行搜索方法成功之后清空搜索框关键字
        this.keyword = '';
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style>
page {
  background: #ffffff;
}
</style>
